<template>
  <div class="co_channels_channels co_party">
    <Row style="width: 600px;">
      <Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="140">
        <FormItem label="合作方名称" prop="partnerId">
          <Select v-model="formValidate.partnerId" style="width:280px" clearable>
            <Option
              v-for="item in partneList"
              :value="item.partnerId"
              :key="item.partnerId"
            >{{ item.partnerName }}</Option>
          </Select>
        </FormItem>
        <FormItem label="合作渠道名称" prop="channelName">
          <Input
            type="text"
            v-filterinput="{ reg: regExp.special }"
            v-model="formValidate.channelName"
            style="width: 280px;"
            :maxlength="50"
          ></Input>
        </FormItem>
         <FormItem label="APPID">
          <Input
            type="text"
            @on-keyup="keyupiid"
            v-model="formValidate.appId"
            style="width: 280px;"
            :maxlength="36"
          ></Input>
        </FormItem>
        <FormItem label="秘钥">
          <Input
            type="text"
            v-model="formValidate.appSecret"
            @on-keyup="keyupise"
            style="width: 280px;"
            :maxlength="36"
          ></Input>
        </FormItem>
        <FormItem label="加密方式">
          <Select v-model="formValidate.signType" style="width:280px">
               <Option value="MD5">MD5</Option>
          </Select>
        </FormItem>
        <FormItem class="form-btn" style="margin-top: 5px;">
          <Button
            type="primary"
            class="pa-submit-btn"
            style="margin-right: 15px;"
            @click="submit"
          >提交</Button>
          <Button @click="back" class="pa-submit-btn">返回</Button>
        </FormItem>
      </Form>
    </Row>
    <!-- </div> -->
  </div>
</template>
<script>
import { createChannelList, getePartneList, getChannelInfo } from '@/api/system/fishing.js'
import { mapState } from 'vuex'
import { routeEqual } from '@/libs/util'
import regExp from '@/libs/regExp'
import './main.less'
export default {
  name: 'cooperation_channels_edit',
  data () {
    return {
      formValidate: {
        partnerId: '',
        channelName: '',
        appId: '',
        appSecret: '',
        signType: 'MD5'
      },
      regExp: regExp,
      model: '',
      isTrue: true,
      partneList: [],
      ruleValidate: {
        partnerId: [{ required: true, message: '请选择合作方名称', trigger: 'change' }],
        channelName: [{ required: true, message: '合作渠道名称不能为空', trigger: 'blur' }]
      }
    }
  },
  computed: {
    ...mapState({
      merchantId: state => state.user.merchantId,
      userId: state => state.user.userId,
      userName: state => state.user.userName
    })
  },
  mounted () {
    this.getList()
  },
  methods: {
    back () {
      this.closeModal()
    },
    keyupiid () {
      this.formValidate.appId = this.formValidate.appId.replace(/[^\w-]/g, '')
    },
    keyupise () {
      this.formValidate.appSecret = this.formValidate.appSecret.replace(/[^\w-]/g, '')
    },
    closeModal () {
      this.$store.commit('closeTag', this.$route)
      this.$store.commit('setTagNavList', this.$store.state.app.tagNavList.filter(item => !routeEqual(this.$route, item)))
      this.$nextTick(() => {
        this.$router.push({
          name: 'cooperation_channels_list'
        })
      })
    },
    getList () {
      getePartneList({
        merchantId: this.merchantId,
        partnerStatus: 0
      }).then(res => {
        if (res.data.status === 200) {
          this.partneList = res.data.data
          getChannelInfo({
            merchantId: this.$store.state.user.merchantId,
            channelId: this.$route.query.id
          }).then(res => {
            if (res.data.status === 200) {
              this.formValidate = res.data.data
            } else {
              this.$Message.error(`${res.data.message}`)
            }
          })
        } else {
          this.$Message.error(`${res.data.error}`)
        }
      })
    },
    submit () {
      this.$refs.formValidate.validate((val) => {
        if (val) {
          if (this.isTrue) {
            this.isTrue = false
            createChannelList({
              partnerId: this.formValidate.partnerId,
              channelName: this.formValidate.channelName,
              channelId: this.$route.query.id,
              merchantId: this.merchantId,
              updater: this.userId,
              updaterName: this.userName
            }).then(res => {
              setTimeout(() => {
                this.isTrue = true
              }, 2000)
              if (res.data.status === 200) {
                this.$Message.success('编辑成功')
                this.closeModal()
              } else {
                this.$Message.error(`${res.data.error}`)
              }
            })
          }
        }
      })
    }
  }
}
</script>
